<template>
  <div class="father">
    <div class="container">
      <div class="slide">
        <el-carousel :interval="5000" arrow="hover" height="500px">
          <el-carousel-item v-for="item in slidesArray" :key="item.id">
            <!-- <h3>{{ item.title }}</h3> -->
            <img :src="'https://sysdocs.cn' + item.img" :alt="item.title" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="news">
        <div class="newsItem">
          <h2>NEXT MATCH</h2>
          <countdown :time="60 * 24 * 60 * 60 * 1000">
            <template slot-scope="props"
              >{{ props.days }} <span>天</span> {{ props.hours }}
              <span>时</span> {{ props.minutes }} <span>分</span>
              {{ props.seconds }} <span>秒</span></template
            >
          </countdown>
        </div>
        <div class="newsItem">
          <h3>2022/9/30 - 10/9</h3>
          <h5>第56届世界乒乓球团体锦标赛</h5>
          <p>中国四川·成都高新体育中心</p>
        </div>
        <div class="newsItem">
          <h3>World Ranking</h3>
          <h5>2022 Week #38</h5>
        </div>
      </div>
    </div>
    <div class="container2">
      <div>SCHEDULE</div>
      <div>
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年"
          size="mini"
          value-format="yyyy"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="container3">
      <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
    </div>

    <div class="container2">
      <div>RECENT</div>
      <div class="more">
        <a href="#">查看更多<span>></span></a>
      </div>
    </div>
    <div class="container2">
      <div class="news2" v-for="item in newsList" :key="item.id">
        <img :src="'https://sysdocs.cn' + item.img" :alt="item.title" />
        <p>{{ item.title.slice(0, 15) + "..." }}</p>
        <span>{{ item.author }}</span>
        <span>{{ item.time }}</span>
      </div>
    </div>

    <div class="container2">
      <div>VIDEOS</div>
      <div class="more">
        <a href="#">查看更多<span>></span></a>
      </div>
    </div>
    <div class="container2">
      <div class="news2" v-for="item in videoList" :key="item.id">
        <iframe
          :src="item.link"
          scrolling="no"
          border="0"
          frameborder="no"
          framespacing="0"
          allowfullscreen="true"
        >
        </iframe>

        <p>{{ item.title }}</p>
        <span>{{ item.author }}</span>
        <span>{{ item.time }}</span>
      </div>
    </div>
    <div class="map-container">
      <div class="map-container" ref="map_ref"></div>
    </div>
    <div class="map-container">
      <div class="map-container" ref="map_ref2"></div>
    </div>
    <div class="swiper-container" id="awardswaper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in awardList" :key="item.id">
          <div v-if="item.id % 2 == 1">
            <div class="awardbox">
              <h5>{{ item.name }}</h5>
              <p>{{ item.rank }}</p>
            </div>
            <div class="awardimg">
              <img :src="'https://sysdocs.cn' + item.img" :alt="item.title" />
            </div>
          </div>
          <div v-if="item.id % 2 == 0">
            <div class="awardimg">
              <img :src="'https://sysdocs.cn' + item.img" :alt="item.title" />
            </div>
            <div class="awardbox">
              <h5>{{ item.name }}</h5>
              <p>{{ item.rank }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <el-dialog :title="dialogtitle" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="year" label="年份"></el-table-column>
        <el-table-column
          property="match_name"
          label="赛事名称"
        ></el-table-column>
        <el-table-column
          property="project_name"
          label="项目名称"
        ></el-table-column>
        <el-table-column property="stage" label="轮次"></el-table-column>
        <el-table-column
          property="match_time"
          label="赛事时间"
        ></el-table-column>
        <el-table-column property="player_a" label="我方选手"></el-table-column>
        <el-table-column property="player_b" label="对方选手"></el-table-column>
        <el-table-column
          property="association"
          label="对手协会"
        ></el-table-column>
        <el-table-column property="result" label="大比分"></el-table-column>
        <el-table-column property="score" label="小比分"></el-table-column>
        <el-table-column property="final_award" label="赛果"></el-table-column>
      </el-table>
    </el-dialog>
    <div class="footer">
      <div class="content">
        <div class="module">
          <dl>
            <dt>赛事</dt>
            <dd>WTT球星赛布达佩斯站</dd>
            <dd>WTT冠军赛布达佩斯站</dd>
            <dd>成都世乒赛团体赛</dd>
            <dd>WTT冠军赛澳门站</dd>
            <dd>WTT新乡世界杯决赛</dd>
          </dl>
          <dl>
            <dt>赛果</dt>
            <dd>所有比赛明细</dd>
            <dd>比赛胜率</dd>
            <dd>战绩锦集</dd>
            <dd>世界排名</dd>
          </dl>
          <dl>
            <dt>产出</dt>
            <dd>乒乓球小课堂</dd>
            <dd>乒乓球用语辞典</dd>
            <dd>应援周边</dd>
            <dd>同款收集</dd>
            <dd>专题特别企划</dd>
          </dl>
          <dl>
            <dt>资讯</dt>
            <dd>媒体采访</dd>
            <dd>路透饭拍</dd>
            <dd>新闻报道</dd>
            <dd>商业活动</dd>
            <dd>他人提及</dd>
          </dl>
          <dl>
            <dt>关于</dt>
            <dd>组织介绍</dd>
            <dd>招贤纳士</dd>
            <dd>联系我们</dd>
          </dl>
          <dl>
            <dd>
              <img
                src="https://sysdocs.cn/showcase_sysdocs_pic/sysdocs_logo.jpg"
                alt="logo"
              />
              邮箱：sysdocs@163.com
            </dd>
          </dl>
        </div>
        <div class="copyright">
          <div>©2022 SYSDOCS. All rights reserved.</div>
          <div>
            <svg
              t="1665505766909"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2243"
              width="24"
              height="24"
            >
              <path
                d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z"
                p-id="2244"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1665399766444"
              class="icon"
              viewBox="0 0 1138 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3639"
              width="24"
              height="24"
            >
              <path
                d="M914.432 518.144q27.648 21.504 38.912 51.712t9.216 62.976-14.336 65.536-31.744 59.392q-34.816 48.128-78.848 81.92t-91.136 56.32-94.72 35.328-89.6 18.944-75.264 7.68-51.712 1.536-49.152-2.56-68.096-10.24-78.336-21.504-79.872-36.352-74.24-55.296-59.904-78.848q-16.384-29.696-22.016-63.488t-5.632-86.016q0-22.528 7.68-51.2t27.136-63.488 53.248-75.776 86.016-90.112q51.2-48.128 105.984-85.504t117.248-57.856q28.672-10.24 63.488-11.264t57.344 11.264q10.24 11.264 19.456 23.04t12.288 29.184q3.072 14.336 0.512 27.648t-5.632 26.624-5.12 25.6 2.048 22.528q17.408 2.048 33.792-1.536t31.744-9.216 31.232-11.776 33.28-9.216q27.648-5.12 54.784-4.608t49.152 7.68 36.352 22.016 17.408 38.4q2.048 14.336-2.048 26.624t-8.704 23.04-7.168 22.016 1.536 23.552q3.072 7.168 14.848 13.312t27.136 12.288 32.256 13.312 29.184 16.384zM656.384 836.608q26.624-16.384 53.76-45.056t44.032-64 18.944-75.776-20.48-81.408q-19.456-33.792-47.616-57.344t-62.976-37.376-74.24-19.968-80.384-6.144q-78.848 0-139.776 16.384t-105.472 43.008-72.192 60.416-38.912 68.608q-11.264 33.792-6.656 67.072t20.992 62.976 42.496 53.248 57.856 37.888q58.368 25.6 119.296 32.256t116.224 0.512 100.864-21.504 74.24-33.792zM522.24 513.024q20.48 8.192 38.912 18.432t32.768 27.648q10.24 12.288 17.92 30.72t10.752 39.424 1.536 42.496-9.728 38.912q-8.192 18.432-19.968 37.376t-28.672 35.328-40.448 29.184-57.344 18.944q-61.44 11.264-117.76-11.264t-88.064-74.752q-12.288-39.936-13.312-70.656t16.384-66.56q13.312-27.648 40.448-51.712t62.464-38.912 75.264-17.408 78.848 12.8zM359.424 764.928q37.888 3.072 57.856-18.432t21.504-48.128-15.36-47.616-52.736-16.896q-27.648 3.072-43.008 23.552t-17.408 43.52 9.728 42.496 39.424 21.504zM778.24 6.144q74.752 0 139.776 19.968t113.664 57.856 76.288 92.16 27.648 122.88q0 33.792-16.384 50.688t-35.328 17.408-35.328-14.336-16.384-45.568q0-40.96-22.528-77.824t-59.392-64.512-84.48-43.52-96.768-15.872q-31.744 0-47.104-15.36t-14.336-34.304 18.944-34.304 51.712-15.36zM778.24 169.984q95.232 0 144.384 48.64t49.152 146.944q0 30.72-10.24 43.52t-22.528 11.264-22.528-14.848-10.24-35.84q0-60.416-34.816-96.256t-93.184-35.84q-19.456 0-28.672-10.752t-9.216-23.04 9.728-23.04 28.16-10.752z"
                p-id="3640"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1665399654664"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2687"
              width="24"
              height="24"
            >
              <path
                d="M960.862 621.881c0-128.796-122.159-233.206-272.851-233.206S415.16 493.086 415.16 621.881s122.159 233.206 272.851 233.206c33.442 0 65.473-5.152 95.081-14.562l93.804 41.448s-17.002-62.341-20.434-76.623c63.569-42.697 104.4-109.007 104.4-183.469z m-365.684-41.497c-21.305 0-38.575-17.271-38.575-38.575s17.271-38.575 38.575-38.575c21.305 0 38.575 17.271 38.575 38.575s-17.27 38.575-38.575 38.575z m184.695 0c-21.305 0-38.575-17.271-38.575-38.575s17.271-38.575 38.575-38.575c21.305 0 38.575 17.271 38.575 38.575s-17.27 38.575-38.575 38.575z"
                p-id="2688"
                fill="#bfbfbf"
              ></path>
              <path
                d="M692.201 367.634c4.055 0 8.085 0.087 12.101 0.219-27.758-128.492-159.512-225.826-317.881-225.826-178.544 0-323.283 123.709-323.283 276.31 0 88.224 48.377 166.791 123.697 217.379-4.067 16.922-24.211 90.786-24.211 90.786l111.142-49.109c35.081 11.149 73.033 17.254 112.655 17.254 4.801 0 9.571-0.107 14.321-0.285-7.979-22.804-12.279-46.927-12.279-71.897 0-140.738 135.988-254.831 303.738-254.831z m-195.789-89.876c25.243 0 45.706 20.463 45.706 45.706s-20.463 45.705-45.706 45.705-45.706-20.462-45.706-45.705 20.464-45.706 45.706-45.706zM277.58 369.169c-25.243 0-45.705-20.462-45.705-45.705s20.463-45.706 45.705-45.706c25.243 0 45.706 20.463 45.706 45.706s-20.463 45.705-45.706 45.705z"
                p-id="2689"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1665399807189"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4631"
              width="24"
              height="24"
            >
              <path
                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                p-id="4632"
                fill="#bfbfbf"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import axios from "axios";
import { getProvinceMapInfo } from "@/utils/map_utils";
export default {
  data() {
    return {
      year: "2022",
      myChart: null,
      chartInstance: null,
      chartInstance2: null,
      allData: null,
      mapData: {}, // 所获取的省份的地图矢量数据
      slidesArray: [],
      awardList: [],
      videoList: [],
      newsList: [],
      chinaMapData: [],
      worldMapData: [],
      matchData: [],
      dialogTableVisible: false,
      gridData: [],
      dialogtitle: "",
    };
  },
  mounted() {
    this.myEcharts();
    //中国地图
    this.initChart();
    this.initChart2();
    this.initSwiper();
    window.addEventListener("resize", () => {
      this.myChart.resize();
      this.chartInstance.resize();
      this.chartInstance2.resize();
    });
    //轮播图
    axios.get("api/slides").then(
      (res) => {
        this.slidesArray = res.data;
      },
      (error) => {
        console.log("falied");
      }
    );

    //视频
    axios.get("api/videos").then(
      (res) => {
        this.videoList = res.data.data.slice(0, 4);
      },
      (error) => {
        console.log("falied");
      }
    );
    //新闻
    axios.get("api/news").then(
      (res) => {
        this.newsList = res.data.data.slice(0, 4);
      },
      (error) => {
        console.log("falied");
      }
    );
  },

  methods: {
    async myEcharts(year) {
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      const yearRange = year ? Number(year) : Number(this.year);
      const ret = await axios.get("api/matches?year=" + yearRange);
      const list = [];
      ret.data.forEach((item, index) => {
        list.push([item.date, Number(item.num)]);
      });
      this.myChart.setOption({
        visualMap: {
          show: false,
          min: 0,
          max: 10,
          inRange: {
            color: ["#3d60bb", "#fbd304", "#fbd3", "#3d6", "#3d95bb"],
          },
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            return params.value[0] + "<br /> " + params.value[1] + "场";
          },
        },

        calendar: {
          range: yearRange,
          left: 30,
          cellSize: ["auto", 20],
          yearLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          dayLabel: {
            firstDay: 1,
            color: "#3d60bb",
          },
          monthLabel: {
            color: "#3d60bb",
          },
        },
        series: {
          type: "heatmap",
          coordinateSystem: "calendar",
          data: list,
        },
      });
      this.myChart.on("click", async (params) => {
        const date = params.value[0];
        const details = await axios.get(
          "api/matches/details?city&nation&date=" + date
        );
        this.gridData = details.data;
        this.dialogtitle = "该日期比赛明细";
        this.dialogTableVisible = true;
      });
    },
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref);
      const ret = await axios.get("../../../static/map/china-cities.json");

      this.$echarts.registerMap("china", ret.data);
      //中国地图
      const chinaMap = await axios.get("api/chinamap");

      // const geoCoordMap = {
      //   海门: [121.15, 31.89],
      //   鄂尔多斯: [109.781327, 39.608266],
      //   招远: [120.38, 37.35],
      //   舟山: [122.207216, 29.985295],
      //   齐齐哈尔: [123.97, 47.33],
      //   盐城: [120.13, 33.38],
      //   赤峰: [118.87, 42.28],
      //   青岛: [120.33, 36.07],
      //   乳山: [121.52, 36.89],
      //   金昌: [102.188043, 38.520089],
      //   泉州: [118.58, 24.93],
      //   莱西: [120.53, 36.86],
      //   日照: [119.46, 35.42],
      //   胶南: [119.97, 35.88],
      //   南通: [121.05, 32.08],
      //   拉萨: [91.11, 29.97],
      //   云浮: [112.02, 22.93],
      //   梅州: [116.1, 24.55],
      //   文登: [122.05, 37.2],
      //   上海: [121.48, 31.22],
      //   攀枝花: [101.718637, 26.582347],
      //   威海: [122.1, 37.5],
      //   承德: [117.93, 40.97],
      //   厦门: [118.1, 24.46],
      //   汕尾: [115.375279, 22.786211],
      //   潮州: [116.63, 23.68],
      //   丹东: [124.37, 40.13],
      //   太仓: [121.1, 31.45],
      //   曲靖: [103.79, 25.51],
      //   烟台: [121.39, 37.52],
      //   福州: [119.3, 26.08],
      //   瓦房店: [121.979603, 39.627114],
      //   即墨: [120.45, 36.38],
      //   抚顺: [123.97, 41.97],
      //   玉溪: [102.52, 24.35],
      //   张家口: [114.87, 40.82],
      //   阳泉: [113.57, 37.85],
      //   莱州: [119.942327, 37.177017],
      //   湖州: [120.1, 30.86],
      //   汕头: [116.69, 23.39],
      //   昆山: [120.95, 31.39],
      //   宁波: [121.56, 29.86],
      //   湛江: [110.359377, 21.270708],
      //   揭阳: [116.35, 23.55],
      //   荣成: [122.41, 37.16],
      //   连云港: [119.16, 34.59],
      //   葫芦岛: [120.836932, 40.711052],
      //   常熟: [120.74, 31.64],
      //   东莞: [113.75, 23.04],
      //   河源: [114.68, 23.73],
      //   淮安: [119.15, 33.5],
      //   泰州: [119.9, 32.49],
      //   南宁: [108.33, 22.84],
      //   营口: [122.18, 40.65],
      //   惠州: [114.4, 23.09],
      //   江阴: [120.26, 31.91],
      //   蓬莱: [120.75, 37.8],
      //   韶关: [113.62, 24.84],
      //   嘉峪关: [98.289152, 39.77313],
      //   广州: [113.23, 23.16],
      //   延安: [109.47, 36.6],
      //   太原: [112.53, 37.87],
      //   清远: [113.01, 23.7],
      //   中山: [113.38, 22.52],
      //   昆明: [102.73, 25.04],
      //   寿光: [118.73, 36.86],
      //   盘锦: [122.070714, 41.119997],
      //   长治: [113.08, 36.18],
      //   深圳: [114.07, 22.62],
      //   珠海: [113.52, 22.3],
      //   宿迁: [118.3, 33.96],
      //   咸阳: [108.72, 34.36],
      //   铜川: [109.11, 35.09],
      //   平度: [119.97, 36.77],
      //   佛山: [113.11, 23.05],
      //   海口: [110.35, 20.02],
      //   江门: [113.06, 22.61],
      //   章丘: [117.53, 36.72],
      //   肇庆: [112.44, 23.05],
      //   大连: [121.62, 38.92],
      //   临汾: [111.5, 36.08],
      //   吴江: [120.63, 31.16],
      //   石嘴山: [106.39, 39.04],
      //   沈阳: [123.38, 41.8],
      //   苏州: [120.62, 31.32],
      //   茂名: [110.88, 21.68],
      //   嘉兴: [120.76, 30.77],
      //   长春: [125.35, 43.88],
      //   胶州: [120.03336, 36.264622],
      //   银川: [106.27, 38.47],
      //   张家港: [120.555821, 31.875428],
      //   三门峡: [111.19, 34.76],
      //   锦州: [121.15, 41.13],
      //   南昌: [115.89, 28.68],
      //   柳州: [109.4, 24.33],
      //   三亚: [109.511909, 18.252847],
      //   自贡: [104.778442, 29.33903],
      //   吉林: [126.57, 43.87],
      //   阳江: [111.95, 21.85],
      //   泸州: [105.39, 28.91],
      //   西宁: [101.74, 36.56],
      //   宜宾: [104.56, 29.77],
      //   呼和浩特: [111.65, 40.82],
      //   成都: [104.06, 30.67],
      //   大同: [113.3, 40.12],
      //   镇江: [119.44, 32.2],
      //   桂林: [110.28, 25.29],
      //   张家界: [110.479191, 29.117096],
      //   宜兴: [119.82, 31.36],
      //   北海: [109.12, 21.49],
      //   西安: [108.95, 34.27],
      //   金坛: [119.56, 31.74],
      //   东营: [118.49, 37.46],
      //   牡丹江: [129.58, 44.6],
      //   遵义: [106.9, 27.7],
      //   绍兴: [120.58, 30.01],
      //   扬州: [119.42, 32.39],
      //   常州: [119.95, 31.79],
      //   潍坊: [119.1, 36.62],
      //   重庆: [106.54, 29.59],
      //   台州: [121.420757, 28.656386],
      //   南京: [118.78, 32.04],
      //   滨州: [118.03, 37.36],
      //   贵阳: [106.71, 26.57],
      //   无锡: [120.29, 31.59],
      //   本溪: [123.73, 41.3],
      //   克拉玛依: [84.77, 45.59],
      //   渭南: [109.5, 34.52],
      //   马鞍山: [118.48, 31.56],
      //   宝鸡: [107.15, 34.38],
      //   焦作: [113.21, 35.24],
      //   句容: [119.16, 31.95],
      //   北京: [116.46, 39.92],
      //   徐州: [117.2, 34.26],
      //   衡水: [115.72, 37.72],
      //   包头: [110, 40.58],
      //   绵阳: [104.73, 31.48],
      //   乌鲁木齐: [87.68, 43.77],
      //   枣庄: [117.57, 34.86],
      //   杭州: [120.19, 30.26],
      //   淄博: [118.05, 36.78],
      //   鞍山: [122.85, 41.12],
      //   溧阳: [119.48, 31.43],
      //   库尔勒: [86.06, 41.68],
      //   安阳: [114.35, 36.1],
      //   开封: [114.35, 34.79],
      //   济南: [117, 36.65],
      //   德阳: [104.37, 31.13],
      //   温州: [120.65, 28.01],
      //   九江: [115.97, 29.71],
      //   邯郸: [114.47, 36.6],
      //   临安: [119.72, 30.23],
      //   兰州: [103.73, 36.03],
      //   沧州: [116.83, 38.33],
      //   临沂: [118.35, 35.05],
      //   南充: [106.110698, 30.837793],
      //   天津: [117.2, 39.13],
      //   富阳: [119.95, 30.07],
      //   泰安: [117.13, 36.18],
      //   诸暨: [120.23, 29.71],
      //   郑州: [113.65, 34.76],
      //   哈尔滨: [126.63, 45.75],
      //   聊城: [115.97, 36.45],
      //   芜湖: [118.38, 31.33],
      //   唐山: [118.02, 39.63],
      //   平顶山: [113.29, 33.75],
      //   邢台: [114.48, 37.05],
      //   德州: [116.29, 37.45],
      //   济宁: [116.59, 35.38],
      //   荆州: [112.239741, 30.335165],
      //   宜昌: [111.3, 30.7],
      //   义乌: [120.06, 29.32],
      //   丽水: [119.92, 28.45],
      //   洛阳: [112.44, 34.7],
      //   秦皇岛: [119.57, 39.95],
      //   株洲: [113.16, 27.83],
      //   石家庄: [114.48, 38.03],
      //   莱芜: [117.67, 36.19],
      //   常德: [111.69, 29.05],
      //   保定: [115.48, 38.85],
      //   湘潭: [112.91, 27.87],
      //   金华: [119.64, 29.12],
      //   岳阳: [113.09, 29.37],
      //   长沙: [113, 28.21],
      //   衢州: [118.88, 28.97],
      //   廊坊: [116.7, 39.53],
      //   菏泽: [115.480656, 35.23375],
      //   合肥: [117.27, 31.86],
      //   武汉: [114.31, 30.52],
      //   大庆: [125.03, 46.58],
      // };
      const geoCoordMap = {
        阿克苏地区: [80.260604, 41.168779],
        和田地区: [79.922211, 37.114157],
        上海: [121.480237, 31.236305],
        东莞: [113.758231, 23.026997],
        东营: [118.588614, 37.454925],
        中山: [113.399023, 22.522262],
        临汾: [111.526153, 36.094052],
        临沂: [118.36299, 35.110531],
        丹东: [124.362564, 40.00569],
        丽水: [119.929503, 28.472979],
        乌鲁木齐: [87.623314, 43.832806],
        佛山: [113.128432, 23.027707],
        保定: [115.471052, 38.880055],
        兰州: [103.840692, 36.067312],
        包头: [109.846755, 40.663636],
        北京: [116.413554, 39.911013],
        北海: [109.126614, 21.486955],
        南京: [118.802891, 32.064735],
        南宁: [108.373351, 22.823037],
        南昌: [115.864528, 28.687675],
        南通: [120.900301, 31.985237],
        厦门: [118.095915, 24.485821],
        台州: [121.426996, 28.662297],
        合肥: [117.235447, 31.82687],
        呼和浩特: [111.758518, 40.847461],
        咸阳: [108.715712, 34.335599],
        哈尔滨: [126.542417, 45.807782],
        唐山: [118.187036, 39.636673],
        嘉兴: [120.762045, 30.750912],
        大同: [113.306446, 40.082539],
        大连: [121.621391, 38.919345],
        天津: [117.205914, 39.090908],
        太原: [112.55706, 37.876885],
        威海: [122.128245, 37.519322],
        宁波: [121.556686, 29.880177],
        宝鸡: [107.243899, 34.367747],
        宿迁: [118.282062, 33.967686],
        常州: [119.980142, 31.816791],
        广州: [113.270793, 23.135308],
        廊坊: [116.69034, 39.54352],
        延安: [109.496361, 36.591003],
        张家口: [114.894165, 40.830172],
        徐州: [117.29235, 34.210143],
        德州: [116.365825, 37.441313],
        惠州: [114.423348, 23.116409],
        成都: [104.071216, 30.576279],
        扬州: [119.419107, 32.39986],
        承德: [117.969798, 40.957855],
        拉萨: [91.121025, 29.650088],
        无锡: [120.318954, 31.496704],
        日照: [119.533606, 35.422798],
        昆明: [102.839667, 24.885953],
        杭州: [120.161693, 30.280059],
        枣庄: [117.328513, 34.816569],
        柳州: [109.42198, 24.331519],
        株洲: [113.140431, 27.833737],
        武汉: [114.311831, 30.598428],
        汕头: [116.688739, 23.359289],
        江门: [113.088165, 22.584459],
        沈阳: [123.438973, 41.811339],
        沧州: [116.845272, 38.31022],
        河源: [114.707097, 23.749829],
        泉州: [118.682316, 24.880242],
        泰安: [117.094893, 36.205905],
        泰州: [119.932115, 32.4612],
        济南: [117.001319, 36.671627],
        济宁: [116.593852, 35.420269],
        海口: [110.206424, 20.050057],
        淄博: [118.061254, 36.819182],
        淮安: [119.022429, 33.616272],
        深圳: [114.066112, 22.548515],
        清远: [113.062619, 23.688238],
        温州: [120.705869, 28.001095],
        渭南: [109.516739, 34.505687],
        湖州: [120.094566, 30.899015],
        湘潭: [112.950575, 27.83585],
        滨州: [117.9792, 37.388387],
        潍坊: [119.168138, 36.713212],
        烟台: [121.454425, 37.469868],
        玉溪: [102.5537, 24.357512],
        珠海: [113.583235, 22.276392],
        盐城: [120.168187, 33.355301],
        盘锦: [122.077269, 41.125939],
        石家庄: [114.520828, 38.048684],
        福州: [119.302938, 26.080447],
        秦皇岛: [119.606184, 39.941259],
        绍兴: [120.586673, 30.036519],
        聊城: [115.992077, 36.462681],
        肇庆: [112.47177, 23.052984],
        舟山: [122.214339, 29.991092],
        苏州: [120.589613, 31.304566],
        莱芜: [117.683221, 36.219357],
        菏泽: [115.487696, 35.239435],
        营口: [122.241475, 40.672565],
        葫芦岛: [120.843388, 40.717364],
        衡水: [115.676942, 37.745166],
        衢州: [118.880768, 28.941661],
        西宁: [101.784269, 36.623477],
        西安: [108.946306, 34.347436],
        贵阳: [106.636816, 26.652747],
        连云港: [119.229571, 34.602342],
        邢台: [114.510889, 37.076646],
        邯郸: [114.545808, 36.631222],
        郑州: [113.631349, 34.753488],
        鄂尔多斯: [109.787314, 39.61463],
        重庆: [106.557165, 29.570997],
        金华: [119.654027, 29.084455],
        铜川: [108.951558, 34.902957],
        银川: [106.238976, 38.492392],
        镇江: [119.431494, 32.195688],
        长春: [125.33017, 43.82178],
        长沙: [112.945333, 28.233971],
        长治: [113.123046, 36.201585],
        阳泉: [113.587087, 37.86234],
        青岛: [120.389445, 36.072358],
        韶关: [113.603757, 24.816174],
        九江: [116.007993, 29.711328],
        大庆: [125.109727, 46.593216],
        宁德: [119.554701, 26.671748],
        忻州: [112.740804, 38.422382],
        石嘴山: [106.39078, 38.989783],
        池州: [117.497839, 30.67098],
        淮南: [117.006189, 32.631837],
        吐鲁番地区: [89.196029, 42.957303],
        宜昌: [111.292971, 30.697602],
        景德镇: [117.184967, 29.274337],
        安庆: [117.070127, 30.548594],
        怒江傈僳族自治州: [98.863189, 25.823736],
        白城: [122.845302, 45.6254],
        萍乡: [113.86077, 27.62897],
        抚州: [116.364627, 27.953603],
        朝阳: [120.457301, 41.579487],
        海东: [102.003965, 36.406412],
        湘西土家族苗族自治州: [109.745507, 28.317399],
        鹰潭: [117.075765, 28.265879],
        阿拉善盟: [105.735357, 38.857806],
        大阪府: [0, 0],
        鹤岗: [130.304284, 47.356043],
        吴忠: [106.205161, 38.003863],
        石河子: [86.085507, 44.312423],
        开封: [114.313904, 34.802941],
        延吉: [129.515602, 42.897211],
        白银: [104.144182, 36.550821],
        吕梁: [111.148086, 37.525476],
        随州: [113.389071, 31.696341],
        雅安: [103.04636, 30.021277],
        平顶山: [113.198935, 33.772051],
        阜新: [121.676518, 42.027983],
        普洱: [100.98114, 22.788486],
        三亚: [109.518646, 18.258217],
        赣州: [114.94126, 25.837179],
        广元: [105.849993, 32.441808],
        锦州: [121.133631, 41.100869],
        南充: [106.117231, 30.843297],
        衡阳: [112.578397, 26.899517],
        齐齐哈尔: [123.924531, 47.360087],
        兴安盟: [122.044544, 46.088444],
        乌海: [106.80185, 39.660154],
        楚雄彝族自治州: [101.534082, 25.051226],
        伊春: [128.84704, 47.733329],
        陇南: [104.928233, 33.406825],
        荆门: [112.205843, 31.041792],
        辽源: [125.150107, 42.8943],
        怀化: [110.008116, 27.575595],
        牡丹江: [129.638976, 44.558647],
        黄南藏族自治州: [102.021495, 35.526125],
        湛江: [110.365494, 21.277163],
        天水: [105.731276, 34.587162],
        黔东南苗族侗族自治州: [107.990602, 26.589858],
        云浮: [112.051045, 22.921154],
        安康: [109.03592, 32.690575],
        日喀则地区: [88.956063, 29.26816],
        海北藏族自治州: [100.907395, 36.960702],
        海西蒙古族藏族自治州: [97.377823, 37.382839],
        吉安: [115.00027, 27.119751],
        黄石: [115.045433, 30.205336],
        宿州: [116.970454, 33.652034],
        茂名: [110.931773, 21.669051],
        阳江: [111.989051, 21.864421],
        信阳: [114.099264, 32.153186],
        三门峡: [111.206832, 34.778442],
        咸宁: [114.328967, 29.847123],
        许昌: [113.858804, 34.041737],
        保山: [99.168373, 25.117882],
        鹤壁: [114.304044, 35.752656],
        运城: [111.013379, 35.032587],
        达州: [107.474504, 31.214347],
        常德: [111.704994, 29.037723],
        酒泉: [98.500427, 39.738615],
        马鞍山: [118.512691, 31.67633],
        南阳: [112.535009, 32.996701],
        邵阳: [111.474133, 27.245167],
        黔南布依族苗族自治州: [107.528663, 26.260586],
        孝感: [113.922962, 30.930712],
        安顺: [105.952622, 26.259904],
        辽阳: [123.243726, 41.274452],
        黔西南布依族苗族自治州: [104.910858, 25.095974],
        克拉玛依: [84.89587, 45.585765],
        庆阳: [107.649305, 35.716096],
        呼伦贝尔: [119.77221, 49.217977],
        六盘水: [104.836786, 26.599086],
        新余: [114.923664, 27.823541],
        七台河: [131.009618, 45.776512],
        商丘: [115.662798, 34.420378],
        漯河: [114.02323, 33.587703],
        乌兰察布: [113.140223, 40.999972],
        潜江: [112.905773, 30.407633],
        定西: [104.631662, 35.587354],
        鸡西: [130.976161, 45.300906],
        汕尾: [115.381693, 22.791322],
        四平: [124.356844, 43.172447],
        西双版纳傣族自治州: [100.803836, 22.013792],
        遂宁: [105.599152, 30.539156],
        商洛: [109.94688, 33.876525],
        海南藏族自治州: [100.626831, 36.292132],
        文山壮族苗族自治州: [104.221606, 23.404187],
        六安: [116.529651, 31.741226],
        张家界: [110.484925, 29.122477],
        潮州: [116.62943, 23.662923],
        蚌埠: [117.395835, 32.921498],
        桂林: [110.296442, 25.279893],
        甘南藏族自治州: [102.917605, 34.98901],
        驻马店: [114.029465, 33.017546],
        林芝地区: [94.368109, 29.654792],
        百色: [106.624969, 23.907845],
        鞍山: [123.000974, 41.114122],
        郴州: [113.021311, 25.776711],
        巴中: [106.753912, 31.872851],
        恩施土家族苗族自治州: [109.494763, 30.277908],
        十堰: [110.80454, 32.635042],
        临沧: [100.10566, 23.914336],
        泸州: [105.449092, 28.877577],
        平凉: [106.671741, 35.549266],
        宣城: [118.765196, 30.946576],
        绵阳: [104.686164, 31.473364],
        佳木斯: [130.32696, 46.806581],
        遵义: [106.933658, 27.731749],
        钦州: [108.66089, 21.985392],
        玉树藏族自治州: [97.01308, 33.011061],
        本溪: [123.773468, 41.299847],
        朔州: [112.438184, 39.33789],
        毕节: [105.333323, 27.408562],
        张掖: [100.456221, 38.932187],
        南平: [118.1843, 26.647662],
        濮阳: [115.035917, 35.767586],
        宜宾: [104.648103, 28.75761],
        铜仁: [109.168558, 27.674903],
        松原: [124.831633, 45.147201],
        漳州: [117.653827, 24.519197],
        梧州: [111.285647, 23.482873],
        洛阳: [112.460033, 34.624376],
        龙岩: [117.023668, 25.081257],
        莆田: [119.014232, 25.45996],
        济源: [112.609314, 35.072867],
        哈密地区: [93.522785, 42.824642],
        昭通: [103.723311, 27.344057],
        大理白族自治州: [100.274223, 25.612206],
        昌吉回族自治州: [87.314822, 44.016923],
        迪庆藏族自治州: [99.70948, 27.825264],
        黑河: [127.535014, 50.251193],
        吉林: [126.556073, 43.843512],
        广安: [106.639772, 30.461708],
        黄山: [118.174807, 30.133213],
        德阳: [104.404319, 31.133105],
        河池: [108.091898, 24.698828],
        益阳: [112.361677, 28.559818],
        通化: [125.946506, 41.733906],
        永州: [111.618703, 26.426612],
        周口: [114.703433, 33.631958],
        梅州: [116.129179, 24.294311],
        锡林郭勒盟: [116.054141, 43.939525],
        固原: [106.24917, 36.021609],
        滁州: [118.323252, 32.308165],
        荆州: [112.24722, 30.340606],
        芜湖: [118.439561, 31.358798],
        襄阳: [112.250093, 32.229169],
        吉隆坡: [0, 0],
        榆林: [109.741195, 38.290886],
        果洛藏族自治州: [100.251341, 34.477207],
        玉林: [110.18743, 22.660656],
        临夏回族自治州: [103.217303, 35.607475],
        鄂州: [114.901557, 30.396522],
        晋中: [112.759375, 37.692757],
        巴音郭楞蒙古自治州: [86.151584, 41.770226],
        澳门: [113.549403, 22.192961],
        内江: [105.065028, 29.585836],
        揭阳: [116.37922, 23.555773],
        通辽: [122.251207, 43.658363],
        阜阳: [115.821389, 32.895879],
        中卫: [105.203332, 37.506058],
        铜陵: [117.818795, 30.950899],
        红河哈尼族彝族自治州: [103.38215, 23.369914],
        曲靖: [103.802685, 25.496328],
        香港: [114.171994, 22.281089],
        汉中: [107.030197, 33.07382],
        乐山: [103.77193, 29.558141],
        新乡: [113.933349, 35.308973],
        晋城: [112.857706, 35.496081],
        巴彦淖尔: [107.394129, 40.749427],
        武威: [102.644524, 37.934078],
        岳阳: [113.135679, 29.363262],
        赤峰: [118.895463, 42.264586],
        白山: [126.431052, 41.94643],
        攀枝花: [101.725262, 26.588109],
        黄冈: [114.878872, 30.459422],
        绥化: [126.975678, 46.658789],
        双鸭山: [131.165442, 46.652966],
        凉山彝族自治州: [102.273965, 27.887685],
        伊犁哈萨克自治州: [81.330697, 43.922815],
        德宏傣族景颇族自治州: [98.591419, 24.438031],
        安阳: [114.3996, 36.103649],
        三明: [117.645742, 26.269683],
        宜春: [114.422683, 27.820089],
        上饶: [117.950028, 28.460864],
        自贡: [104.784891, 29.345379],
        娄底: [112.001082, 27.703196],
        丽江: [100.23357, 26.862521],
        防城港: [108.361138, 21.693439],
        淮北: [116.804878, 33.96064],
        儋州: [109.587145, 19.527081],
        怒江州: [98.863189, 25.823736],
        焦作: [113.248557, 35.221493],
        铁岭: [123.848797, 42.292573],
        抚顺: [123.963595, 41.886078],
        巢湖: [117.88049, 31.608733],
        西双版纳: [100.803836, 22.013792],
        德宏州: [98.591419, 24.438031],
        恩施: [109.485727, 30.30089],
        湘西州: [109.745507, 28.317399],
        西昌: [102.269526, 27.900601],
        阿坝州: [102.231186, 31.905609],
        黔南州: [107.528663, 26.260586],
        黔东南州: [107.990602, 26.589858],
        黔西南州: [104.910858, 25.095974],
        大理州: [100.274223, 25.612206],
        红河州: [103.38215, 23.369914],
        文山州: [104.221606, 23.404187],
        楚雄州: [101.534082, 25.051226],
        迪庆州: [99.70948, 27.825264],
        山南地区: [91.779601, 29.24309],
        那曲地区: [92.0578, 31.482375],
        博尔塔拉蒙古自治州: [82.073064, 44.912168],
        临夏州: [103.217303, 35.607475],
        甘南州: [102.917605, 34.98901],
        格尔木: [94.909745, 36.408588],
        奎屯: [84.90832, 44.432645],
        亳州: [115.7786, 33.8445],
        崇左: [107.3647, 22.3765],
        定安县: [110.3588, 19.6814],
        东方: [108.6518, 19.0953],
        贵港: [109.5989, 23.1115],
        贺州: [111.5666, 24.4035],
        嘉峪关: [98.2891, 39.7731],
        金昌: [102.188, 38.52],
        来宾: [109.2214, 23.7503],
        乐东黎族自治县: [109.173, 18.7502],
        陵水黎族自治县: [110.0375, 18.506],
        眉山: [103.8485, 30.0754],
        琼海: [110.4921, 19.2396],
        台湾: [120.9605, 23.6978],
        天门: [113.3169, 30.8657],
        屯昌县: [110.1034, 19.3517],
        万宁: [110.3816, 18.8078],
        文昌: [113.8259, 25.8228],
        五指山: [109.5169, 18.7751],
        仙桃: [113.4234, 30.3608],
        资阳: [104.652, 30.1246],
        安徽: [117.17, 31.52],
        福建: [119.18, 26.05],
        甘肃: [103.51, 36.04],
        广东: [113.14, 23.08],
        广西: [108.19, 22.48],
        贵州: [106.42, 26.35],
        海南: [110.2, 20.02],
        河北: [114.3, 38.02],
        河南: [113.4, 34.46],
        黑龙江: [126.36, 45.44],
        湖北: [114.17, 30.35],
        湖南: [112.59, 28.12],
        江苏: [118.46, 32.03],
        江西: [115.55, 28.4],
        辽宁: [123.25, 41.48],
        内蒙古: [111.41, 40.48],
        宁夏: [106.16, 38.27],
        青海: [101.48, 36.38],
        山东: [117.0, 36.4],
        山西: [112.33, 37.54],
        陕西: [108.57, 34.17],
        四川: [104.04, 30.4],
        西藏: [91.08, 29.39],
        新疆: [87.36, 43.45],
        云南: [102.42, 25.04],
        浙江: [120.1, 30.16],
      };

      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].location];
          if (geoCoord) {
            res.push({
              name: data[i].location,
              value: geoCoord.concat(data[i].num),
            });
          }
        }
        return res;
      };
      const chinaMapData = convertData(chinaMap.data);
      const topData = convertData(
        chinaMap.data
          .sort(function (a, b) {
            return b.num - a.num;
          })
          .slice(0, 6)
      );
      const initOption = {
        tooltip: {
          show: false,
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          itemStyle: {
            areaColor: "#2E72BF",
            borderColor: "transparent",
          },
          label: {
            normal: {
              show: false, //是否显示省份
            },
            emphasis: {
              show: false,
            },
          },

          emphasis: {
            label: {
              show: false,
              fontSize: 0,
            },
            itemStyle: {
              color: "#2E72BF",
            },
          },
        },

        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: chinaMapData,
            symbolSize: function (val) {
              return val[2] / 2;
            },
            encode: {
              value: 2,
            },
            itemStyle: {
              color: "#3d6",
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                console.log(params);
                return params.name + "<br /> " + "比赛场次：" + params.value[2];
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: topData,
            symbolSize: function (val) {
              return val[2] / 2;
            },
            encode: {
              value: 2,
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                return params.name + "<br /> " + "比赛场次：" + params.value[2];
              },
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            itemStyle: {
              shadowBlur: 10,
              color: "#fbd304",
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
      };
      this.chartInstance.setOption(initOption);
      this.chartInstance.on("click", async (params) => {
        const city = params.name;
        const details = await axios.get(
          "api/matches/details?date&nation&city=" + city
        );
        this.gridData = details.data;
        this.dialogtitle = "该地点比赛明细";
        this.dialogTableVisible = true;
      });
    },
    async initChart2() {
      this.chartInstance2 = this.$echarts.init(this.$refs.map_ref2);
      const ret = await axios.get("../../../static/map/world.json");

      this.$echarts.registerMap("world", ret.data);
      //世界地图
      const worldMap = await axios.get("api/worldmap");

      const geoCoordMap = {
        阿富汗: [67.709953, 33.93911],
        安哥拉: [17.873887, -11.202692],
        阿尔巴尼亚: [20.168331, 41.153332],
        阿联酋: [53.847818, 23.424076],
        阿根廷: [-63.61667199999999, -38.416097],
        亚美尼亚: [45.038189, 40.069099],
        法属南半球和南极领地: [69.348557, -49.280366],
        澳大利亚: [133.775136, -25.274398],
        奥地利: [14.550072, 47.516231],
        阿塞拜疆: [47.576927, 40.143105],
        布隆迪: [29.918886, -3.373056],
        比利时: [4.469936, 50.503887],
        贝宁: [2.315834, 9.30769],
        布基纳法索: [-1.561593, 12.238333],
        孟加拉国: [90.356331, 23.684994],
        保加利亚: [25.48583, 42.733883],
        巴哈马: [-77.39627999999999, 25.03428],
        波斯尼亚和黑塞哥维那: [17.679076, 43.915886],
        白俄罗斯: [27.953389, 53.709807],
        伯利兹: [-88.49765, 17.189877],
        百慕大: [-64.7505, 32.3078],
        玻利维亚: [-63.58865299999999, -16.290154],
        巴西: [-51.92528, -14.235004],
        文莱: [114.727669, 4.535277],
        不丹: [90.433601, 27.514162],
        博茨瓦纳: [24.684866, -22.328474],
        中非共和国: [20.939444, 6.611110999999999],
        加拿大: [-106.346771, 56.130366],
        瑞士: [8.227511999999999, 46.818188],
        智利: [-71.542969, -35.675147],
        中国: [104.195397, 35.86166],
        象牙海岸: [-5.547079999999999, 7.539988999999999],
        喀麦隆: [12.354722, 7.369721999999999],
        刚果民主共和国: [21.758664, -4.038333],
        刚果共和国: [15.827659, -0.228021],
        哥伦比亚: [-74.297333, 4.570868],
        哥斯达黎加: [-83.753428, 9.748916999999999],
        古巴: [-77.781167, 21.521757],
        北塞浦路斯: [33.429859, 35.126413],
        塞浦路斯: [33.429859, 35.126413],
        捷克共和国: [15.472962, 49.81749199999999],
        德国: [10.451526, 51.165691],
        吉布提: [42.590275, 11.825138],
        丹麦: [9.501785, 56.26392],
        多明尼加共和国: [-70.162651, 18.735693],
        阿尔及利亚: [1.659626, 28.033886],
        厄瓜多尔: [-78.18340599999999, -1.831239],
        埃及: [30.802498, 26.820553],
        厄立特里亚: [39.782334, 15.179384],
        西班牙: [-3.74922, 40.46366700000001],
        爱沙尼亚: [25.013607, 58.595272],
        埃塞俄比亚: [40.489673, 9.145000000000001],
        芬兰: [25.748151, 61.92410999999999],
        斐: [178.065032, -17.713371],
        福克兰群岛: [-59.523613, -51.796253],
        法国: [2.213749, 46.227638],
        加蓬: [11.609444, -0.803689],
        英国: [-3.435973, 55.378051],
        格鲁吉亚: [-82.9000751, 32.1656221],
        加纳: [-1.023194, 7.946527],
        几内亚: [-9.696645, 9.945587],
        冈比亚: [-15.310139, 13.443182],
        几内亚比绍: [-15.180413, 11.803749],
        赤道几内亚: [10.267895, 1.650801],
        希腊: [21.824312, 39.074208],
        格陵兰: [-42.604303, 71.706936],
        危地马拉: [-90.23075899999999, 15.783471],
        法属圭亚那: [-53.125782, 3.933889],
        圭亚那: [-58.93018, 4.860416],
        洪都拉斯: [-86.241905, 15.199999],
        克罗地亚: [15.2, 45.1],
        海地: [-72.285215, 18.971187],
        匈牙利: [19.503304, 47.162494],
        印尼: [113.921327, -0.789275],
        爱尔兰: [-8.24389, 53.41291],
        伊朗: [53.688046, 32.427908],
        伊拉克: [43.679291, 33.223191],
        冰岛: [-19.020835, 64.963051],
        以色列: [34.851612, 31.046051],
        意大利: [12.56738, 41.87194],
        牙买加: [-77.297508, 18.109581],
        约旦: [36.238414, 30.585164],
        日本: [138.252924, 36.204824],
        哈萨克斯坦: [66.923684, 48.019573],
        肯尼亚: [37.906193, -0.023559],
        吉尔吉斯斯坦: [74.766098, 41.20438],
        柬埔寨: [104.990963, 12.565679],
        韩国: [127.766922, 35.907757],
        科索沃: [20.902977, 42.6026359],
        科威特: [47.481766, 29.31166],
        老挝: [102.495496, 19.85627],
        黎巴嫩: [35.862285, 33.854721],
        利比里亚: [-9.429499000000002, 6.428055],
        利比亚: [17.228331, 26.3351],
        斯里兰卡: [80.77179699999999, 7.873053999999999],
        莱索托: [28.233608, -29.609988],
        立陶宛: [23.881275, 55.169438],
        卢森堡: [6.129582999999999, 49.815273],
        拉脱维亚: [24.603189, 56.879635],
        摩洛哥: [-7.092619999999999, 31.791702],
        摩尔多瓦: [28.369885, 47.411631],
        马达加斯加: [46.869107, -18.766947],
        墨西哥: [-102.552784, 23.634501],
        马其顿: [21.745275, 41.608635],
        马里: [-3.996166, 17.570692],
        缅甸: [95.956223, 21.913965],
        黑山: [19.37439, 42.708678],
        蒙古: [103.846656, 46.862496],
        莫桑比克: [35.529562, -18.665695],
        毛里塔尼亚: [-10.940835, 21.00789],
        马拉维: [34.301525, -13.254308],
        马来西亚: [101.975766, 4.210484],
        纳米比亚: [18.49041, -22.95764],
        新喀里多尼亚: [165.618042, -20.904305],
        尼日尔: [8.081666, 17.607789],
        尼日利亚: [8.675277, 9.081999],
        尼加拉瓜: [-85.207229, 12.865416],
        荷兰: [5.291265999999999, 52.132633],
        挪威: [8.468945999999999, 60.47202399999999],
        尼泊尔: [84.12400799999999, 28.394857],
        新西兰: [174.885971, -40.900557],
        阿曼: [55.923255, 21.512583],
        巴基斯坦: [69.34511599999999, 30.375321],
        巴拿马: [-80.782127, 8.537981],
        秘鲁: [-75.015152, -9.189967],
        菲律宾: [121.774017, 12.879721],
        巴布亚新几内亚: [143.95555, -6.314992999999999],
        波兰: [19.145136, 51.919438],
        波多黎各: [-66.590149, 18.220833],
        北朝鲜: [127.510093, 40.339852],
        葡萄牙: [-8.224454, 39.39987199999999],
        巴拉圭: [-58.443832, -23.442503],
        卡塔尔: [51.183884, 25.354826],
        罗马尼亚: [24.96676, 45.943161],
        俄罗斯: [105.318756, 61.52401],
        卢旺达: [29.873888, -1.940278],
        西撒哈拉: [-12.885834, 24.215527],
        沙特阿拉伯: [45.079162, 23.885942],
        苏丹: [30.217636, 12.862807],
        南苏丹: [31.3069788, 6.876991899999999],
        塞内加尔: [-14.452362, 14.497401],
        所罗门群岛: [160.156194, -9.64571],
        塞拉利昂: [-11.779889, 8.460555],
        萨尔瓦多: [-88.89653, 13.794185],
        索马里兰: [46.8252838, 9.411743399999999],
        索马里: [46.199616, 5.152149],
        塞尔维亚共和国: [21.005859, 44.016521],
        新加坡: [103.413384, 1.910925],
        苏里南: [-56.027783, 3.919305],
        斯洛伐克: [19.699024, 48.669026],
        斯洛文尼亚: [14.995463, 46.151241],
        瑞典: [18.643501, 60.12816100000001],
        斯威士兰: [31.465866, -26.522503],
        叙利亚: [38.996815, 34.80207499999999],
        乍得: [18.732207, 15.454166],
        多哥: [0.824782, 8.619543],
        泰国: [100.992541, 15.870032],
        塔吉克斯坦: [71.276093, 38.861034],
        土库曼斯坦: [59.556278, 38.969719],
        东帝汶: [125.727539, -8.874217],
        特里尼达和多巴哥: [-61.222503, 10.691803],
        突尼斯: [9.537499, 33.886917],
        土耳其: [35.243322, 38.963745],
        坦桑尼亚联合共和国: [34.888822, -6.369028],
        乌干达: [32.290275, 1.373333],
        乌克兰: [31.16558, 48.379433],
        乌拉圭: [-55.765835, -32.522779],
        美国: [-95.712891, 37.09024],
        乌兹别克斯坦: [64.585262, 41.377491],
        委内瑞拉: [-66.58973, 6.42375],
        越南: [108.277199, 14.058324],
        瓦努阿图: [166.959158, -15.376706],
        西岸: [35.3027226, 31.9465703],
        也门: [48.516388, 15.552727],
        南非: [22.937506, -30.559482],
        赞比亚: [27.849332, -13.133897],
        津巴布韦: [29.154857, -19.015438],
        科摩罗: [43.872219, -11.875001],
        印度尼西亚: [106.515414, -6.10304],
        印度: [78.96288, 20.593684],
      };

      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].nation];
          if (geoCoord) {
            res.push({
              name: data[i].nation,
              value: geoCoord.concat(data[i].num),
            });
          }
        }
        return res;
      };
      const worldMapData = convertData(worldMap.data);
      const topData = convertData(
        worldMap.data
          .sort(function (a, b) {
            return b.num - a.num;
          })
          .slice(0, 6)
      );
      const initOption2 = {
        // backgroundColor: "#fbd304",
        tooltip: {
          show: false,
        },
        geo: {
          type: "map",
          map: "world",
          top: "5%",
          itemStyle: {
            areaColor: "#fbd304",
            borderColor: "transparent",
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              color: "#fbd304",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: worldMapData,
            symbolSize: function (val) {
              return val[2] / 2;
            },
            encode: {
              value: 2,
            },
            itemStyle: {
              color: "#3d6",
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                console.log(params);
                return params.name + "<br /> " + "比赛场次：" + params.value[2];
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: topData,
            symbolSize: function (val) {
              return val[2] / 2;
            },
            encode: {
              value: 2,
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                return params.name + "<br /> " + "比赛场次：" + params.value[2];
              },
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            itemStyle: {
              shadowBlur: 10,
              color: "#3d60bb",
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
      };
      this.chartInstance2.setOption(initOption2);
      this.chartInstance2.on("click", async (params) => {
        const nation = params.name;
        const details = await axios.get(
          "api/matches/details?date&city&nation=" + nation
        );
        this.gridData = details.data;
        this.dialogtitle = "该地点比赛明细";
        this.dialogTableVisible = true;
      });
    },
    async initSwiper() {
      //荣誉墙
      const ret = await axios.get("api/awards");
      this.awardList = ret.data;
      new Swiper("#awardswaper", {
        loop: true, // 循环模式选项
        slidesPerView: 8,
        observer: true,
        // // 如果需要分页器
        // pagination: {
        //   el: ".swiper-pagination",
        // },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },
  watch: {
    year(newValue) {
      this.myEcharts(newValue);
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.myChart.dispose();
      this.chartInstance.dispose();
      this.chartInstance2.dispose();
    });
  },
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 40vh;
  margin: 0 auto;
  --swiper-navigation-color: #fbd304; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
.map-container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.awardbox {
  height: 20vh;
  width: 100%;
  background: #3d60bb;
  color: #fbd304;
  text-align: center;
  align-content: center;
  font-size: 10px;
}
.awardbox p {
  display: inline-block;
  padding: 20px;
  width: 80%;
}
.awardbox h5 {
  padding-top: 5vh;
  display: inline-block;
  width: 50%;
}

.awardimg {
  height: 20vh;
  width: 100%;
}
.awardimg img {
  height: 20vh;
  width: 100%;
}

.father {
  width: 100%;
}
.container {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
  color: #3d60bb;
  font-weight: bold;
}
.container2 {
  position: relative;
  display: flex;
  width: 80%;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 40px;
  justify-content: space-between;
  align-items: center;
  color: #3d60bb;
  font-weight: bold;
  font-size: 20px;
}
.container3 {
  position: relative;
  display: flex;
  width: 80%;
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 40px;
  justify-content: space-between;
  align-items: center;
  color: #3d60bb;
  font-weight: bold;
  font-size: 20px;
}
.slide {
  width: 60%;
  background-color: pink;
}
.slide img {
  width: 100%;
  height: 500px;
}
.news {
  width: 20%;
  display: flex;
  height: 500px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.newsItem {
  height: 150px;
  width: 90%;
  background-color: #fbd304;
  padding: 45px 20px;
  font-size: 0.5vw;
}
.newsItem h2 {
  margin-top: -10px;
  padding-bottom: 20px;
  font-weight: bold;
  font-size: 1.5vw;
}
.newsItem h3 {
  margin-top: -10px;
  font-weight: bold;
  font-size: 1.5vw;
}
.newsItem h5 {
  font-weight: bold;
  font-size: 1vw;
}
.newsItem p {
  font-weight: 400;
  margin-top: 20px;
  font-size: 0.6vw;
}
.newsItem span {
  font-size: 1.3vw;
}
.newsItem:first-child {
  text-align: center;
}

.newsItem:nth-child(2) {
  background-color: #3d60bb;
  color: #fbd304;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.more {
  color: #bfbfbf;
  font-weight: 100;
  font-size: 0.6rem;
  text-align: center;
}
.more span {
  color: #fbd304;
  font-weight: 700;
  font-size: 16px;
}
.news2 {
  width: 23%;
}
.news2 img {
  width: 100%;
  height: 160px;
}
.news2 p {
  color: gray;
  font-size: 12px;
  font-weight: lighter;
  padding: 10px;
  border-bottom: 1px solid lightgray;
  margin-bottom: 5px;
}
.news2 span {
  font-size: 12px;
  color: lightgray;
  font-weight: lighter;
  float: left;
}
.news2 span:last-child {
  float: right;
}
.news2 iframe {
  width: 100%;
  height: 160px;
}
.footer {
  position: relative;
  width: 100%;
  bottom: 0px;
  left: 0px;
  height: 350px;
  margin: auto;
}
.content {
  width: 90%;
  margin: auto;
  padding-top: 50px;
}
.module {
  height: 25vh;
  border-bottom: 1px solid #ccc;
  padding-left: 50px;
}
.module dl {
  width: 15%;
  float: left;
}
.module dl:last-child {
  width: 15%;
  float: right;
  text-align: center;
  margin-right: 50px;
  font-weight: 400;
}
.module dl dt {
  font-size: 1vw;
  color: gray;
  margin-bottom: 20px;
}
.module dl dd {
  font-size: 0.8vw;
  line-height: 0.8vw;
  color: rgb(187, 185, 185);
  margin-bottom: 5px;
  font-weight: 100;
  font-family: "Times New Roman", Times, serif;
}
.copyright {
  display: flex;
  justify-content: space-between;
  padding: 30px 50px;
  font-weight: 400;
  color: #bfbfbf;
}
.copyright svg {
  margin-left: 20px;
}
</style>
